<template>
  <div>
    <van-nav-bar
      title="积分商城"
      left-arrow
      @click-left="onClickLeft"
      fixed
    ></van-nav-bar>
    <van-sidebar v-model="activeKey" @click.native="choose(activeKey)">
      <van-sidebar-item title="全部"> </van-sidebar-item>
      <van-sidebar-item title="会员日区"></van-sidebar-item>
      <van-sidebar-item title="9积分区"></van-sidebar-item>
      <van-sidebar-item title="奈雪好券"></van-sidebar-item>
      <van-sidebar-item title="奈雪限定"></van-sidebar-item>
    </van-sidebar>
    <van-tabs v-model="active">
      <van-tab title="全部" class="tab">
        <div class="item" v-for="item in classify" :key="Math.random(item.id)">
          <router-link :to="`/exchangedetails/${item.id}`">
            <van-image class="img" :src="item.img"></van-image>
            <div class="info">
              <h2>{{ item.name }}</h2>
              <p v-if="item.cash">
                <b>{{ item.points }}</b>&nbsp;积分&nbsp;+&nbsp;<b>{{ item.cash }}</b>&nbsp;元
              </p>
              <p v-else>
                <b>{{ item.points }}</b>&nbsp;积分
              </p>
              <p>剩余库存：{{ item.rest }}件</p>
            </div>
          </router-link>
        </div>
      </van-tab>
      <van-tab title="积分" class="tab">
        <div class="item" v-for="item in classify" :key="Math.random(item.id)" v-if="!item.cash" >
          <router-link :to="`/exchangedetails/${item.id}`">
            <van-image class="img" :src="item.img"></van-image>
            <div class="info">
              <h2>{{ item.kname }}</h2>
              <p v-if="item.cash">
                <b>{{ item.points }}</b>&nbsp;积分&nbsp;+&nbsp;<b>{{ item.cash }}</b>&nbsp;元
              </p>
              <p v-else>
                <b>{{ item.points }}</b>&nbsp;积分
              </p>
              <p>剩余库存：{{ item.rest }}件</p>
            </div>
          </router-link>
        </div>
      </van-tab>
      <van-tab title="积分+现金" class="tab">
        <div class="item" v-for="item in classify" :key="Math.random(item.id)" v-if="item.cash" >
          <router-link :to="`/exchangedetails/${item.id}`">
            <van-image class="img" :src="item.img"></van-image>
            <div class="info">
              <h2>{{ item.kname }}</h2>
              <p v-if="item.cash">
                <b>{{ item.points }}</b>&nbsp;积分&nbsp;+&nbsp;<b>{{ item.cash }}</b>&nbsp;元
              </p>
              <p v-else>
                <b>{{ item.points }}</b>&nbsp;积分
              </p>
              <p>剩余库存：{{ item.rest }}件</p>
            </div>
          </router-link>
        </div>
        <div v-else></div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 0,
      active: 0,
      category: [], //保存积分分类
      classify: [], //保存积分商城各分类的数据
    };
  },
  mounted() {
    // 加载积分商城分类
    this.axios.get("/category").then((res) => {
      this.category = res.data.data;
      console.log("积分分类：", this.category);
    });
    // 加载首页积分商城列表数据
    this.axios.get("/integral").then((res) => {
      this.classify = res.data.data;
      console.log("积分商城：", this.classify);
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push("integral");
    },
    choose(active) {
      console.log(active);
      if (active == 0) {
        this.axios.get("/integral").then((res) => {
          this.classify = res.data.data;
          console.log("积分商城：", this.classify);
        });
      } else if (active == 1) {
        return;
      } else if (active == 2) {
        this.axios
          .get(`/classify?title=${this.category[0].title}`)
          .then((res) => {
            this.classify = res.data.data;
            console.log("积分商城：", this.classify);
          });
      } else if (active == 3) {
        this.axios
          .get(`/classify?title=${this.category[1].title}`)
          .then((res) => {
            this.classify = res.data.data;
            console.log("积分商城：", this.classify);
          });
      } else {
        this.axios
          .get(`/classify?title=${this.category[2].title}`)
          .then((res) => {
            this.classify = res.data.data;
            console.log("积分商城：", this.classify);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-icon {
  color: black;
}
::v-deep .van-sidebar {
  margin-top: 46px;
}
::v-deep .van-sidebar-item--select {
  color: #a7d500;
}
::v-deep .van-sidebar-item--select::before {
  width: 2px;
  height: 60px;
  background-color: #a7d500;
}
::v-deep .van-tabs {
  width: 79vw;
  position: absolute;
  top: 46px;
  right: 0;
}
::v-deep .van-tabs__wrap {
  height: 51px;
}
::v-deep .van-tab--active {
  color: #a7d500;
}
::v-deep .van-tabs__line {
  width: 6vw;
  background-color: #a7d500;
}
.tab {
  width: 79vw;
  background-color: #fff;
  display: flex;
  flex-flow: row wrap;
}
.tab .item {
  width: 35vw;
  margin: 2vw 2vw 0vw;
  flex-shrink: 0;
  display: inline-block;
}
.tab .item .info {
  text-align: left;
  margin: 0vw 2vw 2vw;
}
.tab .item .info h2 {
  font-size: 4vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #909396;
}
.tab .item .info p {
  display: block;
  margin: 1vw 0;
  font-size: 3vw;
  color: #909396;
}
.tab .item .info b {
  font-size: 4vw;
  color: #a7d500;
}
</style>
